<template>
  <div class="comicBrowseSubject">
    <div
      class="comicBrowseMian"
      ref="comicBrowseMianRef"
      @scroll.passive="getScroll($event)"
    >
      <div id="comicBrowse">
        <div v-for="(item, index) in comicList" :key="index">
          <!-- <van-loading color="#1989fa" :id="'loadCom' + index"
          >加载中</van-loading
        > -->
          <van-image :src="item" @click="stateChange()" @load="loadComplete">
            <template v-slot:loading>
              <van-loading type="spinner" size="20">{{
                index + 1
              }}</van-loading>
            </template>
            <template v-slot:error>加载失败</template></van-image
          >
        </div>
      </div>
    </div>

    <div
      :class="[
        'comicBrowseHeder',
        { hiddenStyle: comicBrowseHeaderAndBottom === false },
      ]"
      display="none"
    >
      <van-icon class="returnIcon" name="arrow-left" @click="returnBack" />
      <font>{{ chapter }}</font>
      <van-icon
        :class="[
          'collectionIcon',
          { disPlayStyle: collectionIconShow === false },
        ]"
        name="star-o"
        @click="collectionChange"
      />
      <van-icon
        :class="[
          'collectionIcon',
          { disPlayStyle: collectionIconShow === true },
        ]"
        name="star"
        @click="collectionChange"
      />
    </div>
    <div
      :class="[
        'comicBrowseBottom',
        { hiddenStyle: comicBrowseHeaderAndBottom === false },
      ]"
    >
      <van-slider
        v-model="sliderValue"
        @change="sliderChange"
        :max="100"
        :min="0"
      />
      <div class="switchDiv">
        <div @click="pageChange('prev')">
          <van-icon name="arrow-left" />上一章
        </div>
        <font @click="toCatalog()">目录</font>
        <div @click="pageChange('next')">下一章<van-icon name="arrow" /></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      comicList: '',
      loadingComShow: true,
      comicBrowseHeaderAndBottom: false,
      chapter: '',
      sliderValue: 0,
      pageHeight: '',
      collectionIconShow: false

    };
  },
  created () {
    var id = this.$route.query.id;
    var chapter = this.$route.query.chapter;
    var name = this.$route.query.title;
    var comicList = [];

    comicList = [
      'http://mhpic.jumanhua.com/comic/S/%E6%89%8B%E6%9C%BA%E5%B0%91%E5%B9%B4/1%E8%AF%9D/1.jpg-mht.middle.webp',
      'http://mhpic.jumanhua.com/comic/S/%E6%89%8B%E6%9C%BA%E5%B0%91%E5%B9%B4/1%E8%AF%9D/2.jpg-mht.middle.webp',
      'http://mhpic.jumanhua.com/comic/S/%E6%89%8B%E6%9C%BA%E5%B0%91%E5%B9%B4/1%E8%AF%9D/2.jpg-mht.middle.webp',
      'http://mhpic.jumanhua.com/comic/S/%E6%89%8B%E6%9C%BA%E5%B0%91%E5%B9%B4/1%E8%AF%9D/3.jpg-mht.middle.webp',
      'http://mhpic.jumanhua.com/comic/S/%E6%89%8B%E6%9C%BA%E5%B0%91%E5%B9%B4/1%E8%AF%9D/4.jpg-mht.middle.webp',
      'http://mhpic.jumanhua.com/comic/S/%E6%89%8B%E6%9C%BA%E5%B0%91%E5%B9%B4/1%E8%AF%9D/5.jpg-mht.middle.webp',
      'http://mhpic.jumanhua.com/comic/S/%E6%89%8B%E6%9C%BA%E5%B0%91%E5%B9%B4/1%E8%AF%9D/6.jpg-mht.middle.webp',
      'http://mhpic.jumanhua.com/comic/S/%E6%89%8B%E6%9C%BA%E5%B0%91%E5%B9%B4/1%E8%AF%9D/7.jpg-mht.middle.webp',
      'http://mhpic.jumanhua.com/comic/S/%E6%89%8B%E6%9C%BA%E5%B0%91%E5%B9%B4/1%E8%AF%9D/8.jpg-mht.middle.webp',
      'http://mhpic.jumanhua.com/comic/S/%E6%89%8B%E6%9C%BA%E5%B0%91%E5%B9%B4/1%E8%AF%9D/9.jpg-mht.middle.webp',
      'http://mhpic.jumanhua.com/comic/S/%E6%89%8B%E6%9C%BA%E5%B0%91%E5%B9%B4/1%E8%AF%9D/10.jpg-mht.middle.webp',
      'http://mhpic.jumanhua.com/comic/S/%E6%89%8B%E6%9C%BA%E5%B0%91%E5%B9%B4/1%E8%AF%9D/11.jpg-mht.middle.webp',
      'http://mhpic.jumanhua.com/comic/S/%E6%89%8B%E6%9C%BA%E5%B0%91%E5%B9%B4/1%E8%AF%9D/12.jpg-mht.middle.webp',
      'http://mhpic.jumanhua.com/comic/S/%E6%89%8B%E6%9C%BA%E5%B0%91%E5%B9%B4/1%E8%AF%9D/13.jpg-mht.middle.webp',
      'http://mhpic.jumanhua.com/comic/S/%E6%89%8B%E6%9C%BA%E5%B0%91%E5%B9%B4/1%E8%AF%9D/14.jpg-mht.middle.webp',
      'http://mhpic.jumanhua.com/comic/S/%E6%89%8B%E6%9C%BA%E5%B0%91%E5%B9%B4/1%E8%AF%9D/15.jpg-mht.middle.webp'
    ];

    this.comicList = comicList;
    this.chapter = name + '_' + chapter;
  },
  mounted () {
    var ele = document.getElementById('comicBrowse');
    var height = ele.offsetHeight; // 高度
    this.pageHeight = height;
  },
  methods: {
    pageChange (value) {
      var id = this.$route.query.id;
      var chapter = this.$route.query.chapter;
      var name = this.$route.query.title;
      var chapterNum = Number(chapter);
      console.log(chapterNum);
      if (value === 'prev') {
        // 上一页
        this.$router.push({
          path: '/comicBrowse',
          query: {
            id: id,
            chapter: chapterNum - 1,
            title: name
          }
        });
      } else {
        // 下一页
        this.$router.push({
          path: '/comicBrowse',
          query: {
            id: id,
            chapter: chapterNum + 1,
            title: name
          }
        });
      }
    },
    returnBack () {
      // var id = this.$route.query.id;
      // this.$router.push({
      //   path: '/comicInfo',
      //   query: {
      //     id: id
      //   }
      // });
      this.$router.go(-1);
    },
    toCatalog () {
      var id = this.$route.query.id;
      var name = this.$route.query.title;

      this.$router.push({
        path: '/comicCatalog',
        query: {
          id: id,
          comicName: name
        }
      });
    },
    stateChange () {
      this.comicBrowseHeaderAndBottom = !this.comicBrowseHeaderAndBottom;
    },
    getScroll (event) {
      var zhi = Math.round((event.target.scrollTop / (event.target.scrollHeight - event.target.clientHeight)) * 100.00);

      this.sliderValue = zhi;
    },
    sliderChange (value) {
      var pageSize = Math.round((value / 100.00) * this.pageHeight);
      this.$refs.comicBrowseMianRef.scrollTop = pageSize;
    },
    loadComplete () {
      var ele = document.getElementById('comicBrowse');
      var height = ele.offsetHeight; // 高度
      this.pageHeight = height;
    },
    collectionChange () {
      this.collectionIconShow = !this.collectionIconShow;
    }
  },
  watch: {
    '$route' (to, from) { // 监听路由是否变化
      if (to.query.chapter !== from.query.chapter) {
        // 重新加载数据
        window.location.reload();
      }
    }
  }
};
</script>

<style lang="less" scoped>
.comicBrowseSubject {
  width: 100%;
  height: 100%;

  position: relative;
}
.comicBrowseSubject .comicBrowseMian {
  width: 100%;
  overflow: auto;
  background-color: aliceblue;
  height: 100%;

  div {
    width: 100%;
    min-height: 300px;
    background-color: black;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font {
      display: block;
    }
  }
}
.comicBrowseSubject .comicBrowseHeder {
  width: 100%;
  height: 50px;
  background-color: black;
  opacity: 0.7;
  position: absolute;
  top: 0px;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .returnIcon {
    font-size: 40px;
    color: #ffffff;
  }
  .collectionIcon {
    font-size: 30px;
    margin-right: 10px;
    color: #ffffff;
    display: none;
  }
  .disPlayStyle {
    display: block;
  }
  font {
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
  }
}
.comicBrowseSubject .comicBrowseBottom {
  width: 100%;
  height: 78px;

  background-color: black;
  opacity: 0.9;
  position: absolute;
  visibility: visible;
  bottom: 0px;
  transition: all 0.6s;
  display: flex;
  align-items: center;
  flex-direction: column;
  .van-slider {
    margin-top: 15px;
    width: 92%;
  }
  .switchDiv {
    flex: 1;
    width: 100%;
    margin-top: 5px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: #ffffff;
    div {
      float: left;
      font-size: 19px;
      font-weight: bold;
      height: 100%;
      width: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      i {
        font-size: 30px;
      }
    }
    font {
      display: block;
      float: left;
      height: 100%;
      font-size: 20px;
      font-weight: bold;
      display: flex;
      align-items: center;
    }
  }
}

.comicBrowseSubject .hiddenStyle {
  height: 0px;
  opacity: 0;
  visibility: hidden;
  * {
    display: none !important;
  }
}
</style>>

